import ReactMarkdown from 'react-markdown'
import React from "react";
import './Index.css';
import md from './Netty总结之hello world.md';
import CodeBlock from "../../../component/CodeBlock";
import MarkNav from 'markdown-navbar';
import 'markdown-navbar/dist/navbar.css';
// https://juejin.cn/post/6844904020859944974


class ArticleInfo extends React.Component {
	
	state = {
		markdown: ''
	}
	
	componentWillMount() {
		fetch(md)
			.then(res => res.text())
			.then(text => this.setState({ markdown: text }));
	}
	
	
	render() {
		const { markdown } = this.state;
		return (
			<div className="main">
				<div className="main_container">
					<div className="article_left_content">
						<div className="left_markdown">
							<ReactMarkdown
								source={markdown}
								renderers={{ code: CodeBlock }}
							/>
						</div>
					</div>
					<div className="article_right_menu">
						<div className="markNav-title">文章目录</div>
						<MarkNav
							className="markNav-menu"
							source={markdown}
							headingTopOffset={80}
						/>
					</div>
				</div>
			</div>
		)
	}
	
}

export default ArticleInfo;